<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script>
        $(function (){
           $("#getBtn").click(function (){
               // console.log($("#div1").css('width'));
               //   在ie浏览器中，要获取边框这样的样式值，一定要记得给一个准确的边框
               //     $("#div1").css('border-top-width');
               //    注意：获取样式操作只会返回第一个元素对应的样式值
               // console.log($('div').css('width'));
           }) ;
            //设置样式：css（）方法要给样式名和样式值
            $('#setBtn').click(function (){
               // 设置单个样式
               // $('#div1').css('backgroundColor','red') ;
               // $('#div1').css('border','green 9px solid');
               // 设置多个样式
                $('#div1').css({
                   backgroundColor:red,
                   width:300,
                   height:200,
                });
            });
        });

    </script>
</head>
<body>
<input type="button" value="获取样式" id="getBtn">
<input type="button" value="设置样式" id="setBtn">
<div id="div1" style="width: 200px;height: 100px"></div>
<div id="div2" style="width: 300px;height: 200px"></div>
<div id="div3" style="width:500px;height: 300px"></div>
<!--div>div{我是第$个标签}*10-->
<div>
    <div>我是第1个标签</div>
    <div>我是第2个标签</div>
    <div>我是第3个标签</div>
    <div>我是第4个标签</div>
    <div>我是第5个标签</div>
    <div>我是第6个标签</div>
    <div>我是第7个标签</div>
    <div>我是第8个标签</div>
    <div>我是第9个标签</div>
    <div>我是第10个标签</div>
</div>
</body>
</html>